<template>
	<view class="page ">
		<!-- 		<up-navbar :title="`红旗老师${qu_num}区记忆法`" @rightClick="{}" :autoBack="true" bgColor="#f1f1f1"
			placeholder></up-navbar> -->
		<!-- <view class="content flex "
			:style="list&&list['3']?{'flex-direction':'column','flex-wrap':'wrap'}:{'flex-direction':layout}">
			<view :style="list&&list['3']?{'width':'50%',height:'50%'}:{flex: '1'}"
				class="region relative flex-wrap box-sizing" v-for="(item,index) in list" :key="index">
				<view @click="open(item,index,it,i)" :class="it.status == 1?'activeBorder':'defaultBorder'"
					class="wordBox flex width-half column space-between box-sizing" v-for="(it,i) in item" :key="i"
					style="z-index: 9;">
					<view class="flex space-between fontSize-28">
						<view v-if="it.status == 1" class="tag" :class="it.status == 1?'activeBj':'defaultBj'">
							{{it.learn_status==1?'已记':'未记'}}
						</view>
					</view>
					<view class="flex column box-sizing padding-20 " style="flex: 1;">
						<view class="fontSize-24 text-hidden"
							v-for="(t,k) in it.wordsList&&it.wordsList.length>5?it.wordsList.splice(0,5):it.wordsList"
							:key="k">
							<span :class="t.status == 1?'green':''">{{parseInt(k)+1}}.{{t.wordHead}}</span>

						</view>
				
					</view>
					<view class="fontSize-28">
						<view class="padding-20 borderRadius-8"
							style="background-color: #a6d2ff;opacity: .6; padding: 10rpx 30rpx; display: inline-block;">
							<span style="color: #ce0404;">{{it.rem_count?it.rem_count:0}}</span>/<span
								style="color: #12822a;">{{it.total_count?it.total_count:0}}</span>
						</view>
					</view>
				</view>
				<view class="absText absolute">
					{{index}}
				</view>
			</view>
		</view> -->
		<view class="box flex flex-wrap relative" :style="{ height: (windowHeight-44)/2 + 'px' }">
			<image src="../../static/image/yidanyuan.png" mode="" class="positon_img"></image>
			<view class="box_lists" v-for="(i,v) in list[1]" :key="v">
				<view class="absolute" v-if="i.learn_status==0" @click.stop='showPopup(i)'>
					<image src="../../static/image/no_data.png" mode="" class="noda_img"></image>
					<view class="noda_title">
						等待你来开启哦~
					</view>
				</view>
				<view class="box_list_head flex items-center" v-if="(v)%2 ==1">
					<view class="box_title marginRight-30">
						门牌号1-{{v}}
					</view>
					<view class="box_pro" @click='editName(i)'>
						{{i.title}}
					</view>
				</view>
				<view class="box_list_head flex items-center flex-end" v-if="(v) % 2 ==0">
					<view class="box_pro marginRight-30" @click='editName(i)'>
						{{i.title}}
					</view>
					<view class="box_title ">
						门牌号1-{{v}}
					</view>
				</view>
				<view class="" v-if="i.wordsList.length>0" style="height: 80%;" @longpress="onLongPress(i)">
					<view class="flex" v-if="i.wordnum==3" style="height: 100%;" @click='toFour(i,1)'>
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>3" style="height: 100%;" :style="{
		                      backgroundImage: `url('${i.leftimg}')`,
		                    }">
								<view class="box_list  flex items-center" v-for="(it,inx) in i.wordsList.slice(0,3)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=3" style="height: 100%;" :style="{
		                      backgroundImage: `url('${i.leftimg}')`,
		                    }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList" :key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>

							</view>
							<view class="pos_img" v-if="index==1" style="height: 100%;" :style="{
		                      backgroundImage: `url('${i.rightimg}')`,
		                    }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(3,6)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+4}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex" v-if="i.wordnum==4" style="height: 100%;" @click='toFour(i,1)'>
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>4" :style="{
					          backgroundImage: `url('${i.leftimg}')`,
					        }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(0,4)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=4" :style="{
					          backgroundImage: `url('${i.leftimg}')`,
					        }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList" :key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==1" :style="{
					          backgroundImage: `url('${i.rightimg}')`,
					        }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(4,8)"
									:key="inx">

									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+5}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex" v-if="i.wordnum==5" style="height: 100%;" @click='toFour(i,1)'>
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>5" :style="{
		                      backgroundImage: `url('${i.leftimg}')`,
		                    }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(0,5)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=5" :style="{
		                      backgroundImage: `url('${i.leftimg}')`,
		                    }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList" :key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==1" :style="{
		                      backgroundImage: `url('${i.rightimg}')`,
		                    }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(5,10)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+6}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="bg">
			{{zhuang}}
		</view>
		<view class="box box_other flex flex-wrap relative" :style="{ height: (windowHeight-44)/2 + 'px' }">
			<image src="../../static/image/erdanyuan.png" mode="" class="positon_img"></image>
			<view class="box_lists" v-for="(i,v) in list[2]" :key="v">
				<view class="absolute" v-if="i.learn_status==0" @click.stop='showPopup(i)'>
					<image src="../../static/image/no_data.png" mode="" class="noda_img"></image>
					<view class="noda_title">
						等待你来开启哦~
					</view>
				</view>
				<view class="box_list_head flex items-center" v-if="(v)%2 ==1">
					<view class="box_title marginRight-30">
						门牌号2-{{v}}
					</view>
					<view class="box_pro" @click='editName(i)'>
						{{i.title}}
					</view>
				</view>
				<view class="box_list_head flex items-center flex-end" v-if="(v)%2 ==0">
					<view class="box_pro marginRight-30" @click='editName(i)'>
						{{i.title}}
					</view>
					<view class="box_title">
						门牌号2-{{v}}
					</view>
				</view>
				<view class="" v-if="i.wordsList.length>0" style="height: 80%;" @longpress="onLongPress(i)">
					<view class="flex" v-if="i.wordnum==3" style="height: 100%;" @click='toFour(i,1)'>
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>3" style="height: 100%;" :style="{
			              backgroundImage: `url('${i.leftimg}')`,
			            }">
								<view class="box_list  flex items-center" v-for="(it,inx) in i.wordsList.slice(0,3)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=3" style="height: 100%;" :style="{
			              backgroundImage: `url('${i.leftimg}')`,
			            }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList" :key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>

							</view>
							<view class="pos_img" v-if="index==1" style="height: 100%;" :style="{
			              backgroundImage: `url('${i.rightimg}')`,
			            }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(3,6)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+4}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex" v-if="i.wordnum==4" style="height: 100%;" @click='toFour(i,1)'>
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>4" :style="{
				          backgroundImage: `url('${i.leftimg}')`,
				        }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(0,4)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=4" :style="{
				          backgroundImage: `url('${i.leftimg}')`,
				        }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList" :key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==1" :style="{
				          backgroundImage: `url('${i.rightimg}')`,
				        }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(4,8)"
									:key="inx">

									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+5}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex" v-if="i.wordnum==5" style="height: 100%;" @click='toFour(i,1)'>
						<view class="box_list_cont paddingLeft-16 " v-for="(item,index) in 2" :key="index"
							:class="(index+1)%2 ==1?'border_right':''">
							<view class="pos_img" v-if="index==0&&i.wordsList.length>5" :style="{
			              backgroundImage: `url('${i.leftimg}')`,
			            }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(0,5)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==0&&i.wordsList.length<=5" :style="{
			              backgroundImage: `url('${i.leftimg}')`,
			            }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList" :key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+1}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
							<view class="pos_img" v-if="index==1" :style="{
			              backgroundImage: `url('${i.rightimg}')`,
			            }">
								<view class="box_list  flex items-center " v-for="(it,inx) in i.wordsList.slice(5,10)"
									:key="inx">
									<view class="u-line-1 flex1" :class="it.status == 1?'hover':''">
										{{inx+6}}.{{it.wordHead}}
									</view>
									<image src="../../static/image/laoda.png" mode="" class="laoda_img"
										v-if="it.is_biger==1"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<up-popup :safeAreaInsetBottom="false" mode="center" round="5" :show="phoneShow" @close="close"
			@open="phoneShow = true">
			<view class="popupBox fontSize-28">
				<view class="width-full weight-700 text-center">
					第{{page}}页
				</view>
				<view class="flex space-between color-696969 marginTop-30">
					<view class="">
						{{big_sort}}-{{small_sort}}区
					</view>
					<view class="flex">
						<view class="">
							生词：<span style="color: red;"> {{unrem_count}}</span>
						</view>
						<view class="marginLeft-20">
							已熟悉词：<span style="color: #12822a;">{{rem_count}}</span>
						</view>
					</view>
				</view>
				<view class="flex column marginTop-30">
					<view class="flex items-center space-between height-60" v-for="(it,i) in words" :key="i">
						<view class="fontSize-30 weight-700">
							{{parseInt(i)+1}}.{{it.wordHead}}
						</view>
						<view class="" v-if="it.is_know == 1">
							<up-icon name="checkbox-mark" color="#0ad666" size="24"></up-icon>
						</view>
					</view>
				</view>

				<view class="width-full marginTop-30 box-sizing btns flex column items-center flex-center">
					<view class="">
						{{big_sort}}-{{small_sort}}区单词请查收
					</view>
					<view class="marginTop-30 flex flex-center" style="width: 80%;">
						<view class="marginTop-30 flex flex-center column" style="width: 80%;">
							<up-button @click="listShow?toPage2():''" :disabled="!listShow" size="normal" type="primary"
								:text="learn_status === 1?'检测记忆':'开启记忆'"></up-button>
							<view class="height-30 width-full"></view>
							<!-- 	<up-button v-if="acitveData.practice_content&&acitveData.practice_content!=''&&isJy==1"
								@click="listShow?toPage():''" :disabled="!listShow" size="normal" type="primary" plain
								text="查看故事"></up-button>
							<up-button
								v-if="!acitveData.practice_content&&isJy==1||acitveData.practice_content==''&&isJy==1"
								@click="listShow?toPage():''" :disabled="!listShow" size="normal" type="primary" plain
								text="编故事"></up-button> -->
						</view>
						<!-- <up-button @click="listShow?toPage():''" :disabled = "!listShow" size = "normal" type="primary"  text="开启记忆"></up-button> -->
					</view>
				</view>
			</view>
		</up-popup>
		<!-- 	<up-popup bgColor="transparent" round="8" closeOnClickOverlay :title="'排版设置'" @close="sheetClose"
			:show="sheetShow">
			<view class="sheetBox">
				<view @click="sheetSelect(i)"
					:style="{color:t.color,fontSize:t.fontSize,borderBottom:'1rpx solid #ededed'}"
					class="width-full flex items-center flex-center height-100" v-for="(t,i) in sheetList" :key="i">
					{{t.name}}
				</view>
			</view>
		</up-popup> -->
		<!-- 指引一 -->
		<up-popup :show="firstTipShow" mode='center' bgColor='transparent'>
			<view class="popup_bg" :style="{
		        backgroundImage: `url('${firstTipsBj}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="btn-section">
					<view class="btn" style="background: #ccc;margin-right: 30rpx;" @click='next(1)'>
						跳过
					</view>
					<view class="btn" @click='toEditName'>
						确定
					</view>
				</view>
			</view>


		</up-popup>
		<!-- 修改名称 -->
		<up-popup :show="editShow" mode='center' bgColor='transparent'>
			<view class="edit_bg" :style="{
		        backgroundImage: `url('${editBj}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="fontSize-52 color-white weight-700 text-center marginTop-30" style="letter-spacing: 6px;">
					{{givename.title1}}
				</view>
				<view class="fontSize-36 color-333 weight-700 text-center marginTop-100">
					{{givename.title2}}
				</view>
				<view class="">
					<up-input placeholder="最多五个字" border="surround" v-model="inputVal" maxlength='5'></up-input>
				</view>
				<view class="btn-section">
					<view class="btn" style="background: #ccc;margin-right: 22rpx;" @click='cancelEditName'>
						取消
					</view>
					<view class="btn" @click='edit'>
						确定
					</view>
				</view>
			</view>
		</up-popup>
		<!-- 指引二 -->
		<up-popup :show="secondTipShow" mode='center' bgColor='transparent'>
			<view class="popup_bg bg2" :style="{
		        backgroundImage: `url('${secondTipsBj}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="btn-section">
					<view class="btn" style="background: #ccc;margin-right: 30rpx;" @click='next(2)'>
						跳过
					</view>
					<view class="btn" @click='toEditPlant'>
						确定
					</view>
				</view>
			</view>
		</up-popup>

		<!-- 修改植物 -->
		<up-popup :show="plantShow" mode="bottom" :closeOnClickOverlay="false" :closeable="true" round='20'
			@close="closePlant">
			<view class="popup-main">
				<view class="fontSize-32 color-333 text-center">
					请选择家庭植物
				</view>
				<view class="flex space-between items-center flex-wrap box-sizing marginTop-40">
					<view class="box-sizing width-180 height-180 borderRadius-30" v-for='(item,index) in plantList'
						:key='index' @click='selectImgSrc(item,index)' :style="getImageStyle(index)">
						<image :src="item" mode="" style="width: 100%; height: 100%;" class="box-sizing"></image>
					</view>

				</view>
				<view
					class="width-full height-104 borderRadius-92 color-white text-center fontSize-32 colorBj-51D580 marginTop-46"
					@click='toPlant' style="line-height: 104rpx;">
					种植
				</view>
			</view>

		</up-popup>
		<!-- 指引三 -->
		<up-popup :show="threeTipShow" mode='center' bgColor='transparent'>
			<view class="popup_bg bg2" :style="{
		        backgroundImage: `url('${threeTipsBj}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="btn-section">
					<view class="btn" style="background: #ccc;margin-right: 30rpx;" @click='next(3)'>
						跳过
					</view>
					<view class="btn" @click='toEditAnimal'>
						确定
					</view>
				</view>
			</view>
		</up-popup>
		<!-- 修改动物 -->
		<up-popup :show="animalShow" mode="bottom" :closeOnClickOverlay="false" :closeable="true" round='20'
			@close="closeAnimal">
			<view class="popup-main">
				<view class="fontSize-32 color-333 text-center">
					请选择家庭饰物
				</view>
				<view class="flex space-between items-center flex-wrap box-sizing marginTop-40">
					<view class="box-sizing width-180 height-180 borderRadius-30" v-for='(item,index) in decorateList'
						:key='index' @click='selectImgSrc2(item,index)' :style="getImageStyle2(index)">
						<image :src="item" mode="" style="width: 100%; height: 100%;" class="box-sizing"></image>
					</view>

				</view>
				<view
					class="width-full height-104 borderRadius-92 color-white text-center fontSize-32 colorBj-51D580 marginTop-46"
					@click='toAnimal' style="line-height: 104rpx;">
					使用
				</view>
			</view>

		</up-popup>

		<!-- 修改完成 -->
		<up-popup :show="finishShow" mode='center' bgColor='transparent'>
			<view class="edit_bg" :style="{
		        backgroundImage: `url('${finishBj}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="fontSize-28 color-666 weight-700 text-center marginTop-250">
					{{givename.zswc_title1}}
				</view>
				<view class="fontSize-32 color-333 weight-700 text-center marginTop-36">
					{{givename.zswc_title2}}
				</view>
				<view class="btn-section">
					<view class="btn" @click='toStepTwo'>
						确定
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="noOpenShow" mode='center' bgColor='transparent'>
			<view class="noOpen_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-32 color-333">
					学习需要循序渐进，上个小家训练还未完成，请先完成上个小家的训练才能解锁哟
				</view>

				<view class="flex flex-center items-center marginTop-50">
					<view class="btn" @click="noOpenShow = false" style="background: #51D580;">
						知道了
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="longShow" mode='center' :round="25" @close='close'>
			<view class="long_popup">
				<view class="flex space-between">
					<view class="pro">
						门牌号{{info.big_sort}}-{{info.small_sort}}
					</view>
					<view class="name">
						{{info.title}}
					</view>
				</view>
				<view class="flex flex-wrap space-between marginTop-82">
					<view class="long_list flex items-center paddingLeft-30 paddingRight-30" v-for="(item,index) in info.wordsList" :key="index" @click="secClick(item)">
						<image src="../../static/weixuanzhong.png" mode="" class="sec_img " v-if="!item.select"></image>
						<image src="../../static/xuanzhong.png" mode="" class="sec_img " v-else></image>
						<view class="logn_head u-line-1 " style="flex: 1;">
							{{item.wordHead}}
						</view>
					</view>
				</view>
				<view class="pos_absolute">
					<view class=" flex items-center u-flex-center marginBottom-30">
						<image src="../../static/image/warn_img.png" mode="" class="warn_img"></image>
						<view class="warn_cont">
							请将您已认识的单词移入熟词本
						</view>
					</view>
					<view class="warn_btn" @click="yiru">
						移入熟词本
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const phoneShow = ref(false);
	const getAreaWordsApi = inject('getAreaWords');
	const getAreaWordsViewApi = inject('getAreaWordsView');
	const updateTypesetApi = inject('updateTypeset');
	const defaultnameApi = inject('defaultname');
	const upnameApi = inject('upname');
	const getplantApi = inject('getplant');
	const editForm = ref({})
	const acitveData = ref({})
	const words = ref([])
	const plantList = ref([])
	const decorateList = ref([])
	const finishList = ref([])


	// let sShow = !uni.getStorageSync('sheetShow') ? true : false



	const list = ref({});
	const page = ref(1);
	const pageVal = ref('');
	const qu_num = ref(2);
	const listShow = ref(false)
	const sheetShow = ref(false);
	const firstTipShow = ref(false);
	const editShow = ref(false);
	const secondTipShow = ref(false);
	const threeTipShow = ref(false);
	const plantShow = ref(false);
	const animalShow = ref(false);
	const finishShow = ref(false);


	const givename = ref([])
	const secondTipsBj = ref('')
	const firstTipsBj = ref('')
	const threeTipsBj = ref('')
	const editBj = ref('')
	const finishBj = ref('')

	const inputVal = ref('')
	const layout = ref('row');
	const loadShow = ref(true)
	const isJy = ref(1)
	const selectedIndex = ref(-1);
	const selectedIndex2 = ref(-1);

	const selectImg = ref('');
	const selectAnimal = ref('');
	const noOpenName = ref('');
	const noOpenShow = ref(false);


	const sheetList = ref([{
			name: '排版设置',
			color: '#333',
			fontSize: '33rpx'
		},
		{
			name: '上下区',
			color: '#4161d0',
			fontSize: '33rpx'
		},
		{
			name: '左右区',
			color: '#4161d0',
			fontSize: '33rpx'
		},
	])
	onMounted(() => {

	})

	let refData = {}
	const windowHeight = ref('')
	const windowWeight = ref('')
	const pageentr_num = ref(0)
	const item = ref({})
	const region_num = ref(0)
	const big_sort = ref(1)
	const small_sort = ref(1)
	onLoad((op) => {
		console.log(op, 241)
		page.value = op.page;
		region_num.value = op.region_num
		// pageVal.value = op.pageVal;
		// qu_num.value = op.qu_num

		isJy.value = op.isJy ? op.isJy : 1
		// if (op.qu_num == 2) {
		// 	sheetShow.value = sShow
		// }

		getAreaWords()
		// 异步获取屏幕高度
		uni.getSystemInfo({
			success: function(info) {
				windowHeight.value = info.windowHeight
				windowWeight.value = info.windowHeight
				console.log('屏幕的高度：' + windowHeight.value);
				console.log('屏幕的宽度：' + windowWeight.value);
			}
		});

		if (op.pageentr_num == 0) {
			firstTipShow.value = true
		}
		pageentr_num.value = op.pageentr_num
		uni.setStorageSync('pageentr_num', op.pageentr_num)




	})
	onShow(() => {
		if (!loadShow.value) {
			getAreaWords()


		}

	})

	const zhuang = ref('')
	const getAreaWords = () => {
		getAreaWordsApi({
			page: page.value
		}).then(res => {
			list.value = res.wordList
			zhuang.value = res.zhuang
			firstTipsBj.value = res.givename[0].qmtsc_image
			editBj.value = res.givename[0].qmbgc_image
			secondTipsBj.value = res.givename[0].zwts_image
			threeTipsBj.value = res.givename[0].zsts_image
			finishBj.value = res.givename[0].zswc_image
			givename.value = res.givename[0]

			loadShow.value = false
		})
	}
	const toPage = () => {
		refData['content'] = refData.practice_content
		let stringData = JSON.stringify({
			...refData,
			type: 3
		})
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/practiceWord?data=' + JSON.stringify(refData)
		})
	}
	const toPage2 = () => {
		let stringData = JSON.stringify({
			...refData,
			type: 3
		})
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/rememberWord?data=' + JSON.stringify(refData)
		})
	}
	const close = () => {
		phoneShow.value = false
		longShow.value=false
	}
	const sheetClose = () => {
		sheetShow.value = false
		// uni.setStorageSync('sheetShow', true)
	}
	const sheetSelect = (e) => {
		// layout.value = e == 1 ? 'column' : e == 2 ? 'row' : layout.value
		// uni.setStorageSync('layout', layout.value)
		//e 上下是1 左右是2
		if (e == 1) {
			updateTypesetApi({
				typeset: 'up',
			}).then(res => {
				// console.log('res')
				layout.value = 'about'
			})
		} else if (e == 2) {
			updateTypesetApi({
				typeset: 'about'
			}).then(res => {
				// console.log('res')
				layout.value = 'row'
			})
		} else {
			updateTypesetApi({
				typeset: ''
			}).then(res => {
				// console.log('res')
			})
		}
		sheetClose();
	}

	const rem_count = ref('')
	const unrem_count = ref('')
	const learn_status = ref(0)
	// const open = (item, index) => {
	// 	console.log(item, index, 'ooooojhkjhhj')
	// 	learn_status.value = item.learn_status
	// 	big_sort.value = item.big_sort
	// 	small_sort.value = item.small_sort
	// 	getAreaWordsViewApi({
	// 		page: page.value,
	// 		big_sort: item.big_sort,
	// 		small_sort: item.small_sort,
	// 	}).then(res => {
	// 		phoneShow.value = true
	// 		rem_count.value = res.rem_count
	// 		unrem_count.value = res.unrem_count
	// 		words.value = res.wordList
	// 		if (res.wordList && res.wordList.length > 0) {
	// 			refData['subscript'] = big_sort.value + '_' + small_sort.value;
	// 			refData['learn_status'] = learn_status.value;
	// 			refData['rem_count'] = rem_count.value;
	// 			refData['total_count'] = item.total_count;
	// 			refData['sheng'] = unrem_count.value
	// 			refData['wordList'] = res.wordList
	// 			refData['page'] = page.value
	// 			refData['big_sort'] = big_sort.value;
	// 			refData['small_sort'] = small_sort.value;
	// 			refData['practice_content'] = item.practice_content;
	// 			refData['content'] = refData.practice_content
	// 			listShow.value = true
	// 		}
	// 	})
	// }

	const toEditPlant = () => {
		secondTipShow.value = false
		plantShow.value = true
		getplantApi().then(res => {
			console.log(res)
			plantList.value = res.plantlist
			decorateList.value = res.decoratelist
		})
	}
	const toEditName = () => {
		firstTipShow.value = false
		editShow.value = true
	}

	const edit = () => {
		console.log('editForm.value', editForm.value)
		if (pageentr_num.value == 0) {
			upnameApi({
				page: page.value,
				big_sort: big_sort.value,
				small_sort: small_sort.value,
				type: 'name',
				name: inputVal.value,
			}).then(res => {
				console.log(res)
				editShow.value = false
				secondTipShow.value = true
			})
		} else {
			upnameApi({
				page: page.value,
				big_sort: editForm.value['big_sort'],
				small_sort: editForm.value['small_sort'],
				type: 'name',
				name: inputVal.value,
			}).then(res => {
				console.log(res)
				editShow.value = false
				plantShow.value = true
				getplantApi().then(res => {
					console.log(res)
					plantList.value = res.plantlist
					decorateList.value = res.decoratelist
				})

			})
		}


	}

	// 跳过
	const next = (i) => {
		if (i == 1) {
			firstTipShow.value = false
			defaultnameApi({
				page: page.value,
				big_sort: big_sort.value,
				small_sort: small_sort.value,
				type: 'name',

			}).then(res => {
				console.log(res)
				if (pageentr_num.value == 0) {
					secondTipShow.value = true
				} else {
					plantShow.value = true
				}
			})
		} else if (i == 2) {
			secondTipShow.value = false
			defaultnameApi({
				page: page.value,
				big_sort: big_sort.value,
				small_sort: small_sort.value,
				type: 'plant',

			}).then(res => {
				console.log(res)
				if (pageentr_num.value == 0) {
					threeTipShow.value = true
				} else {
					animalShow.value = true
				}
			})
		} else if (i == 3) {
			threeTipShow.value = false
			defaultnameApi({
				page: page.value,
				big_sort: big_sort.value,
				small_sort: small_sort.value,
				type: 'decorate',

			}).then(res => {
				console.log(res)
				if (pageentr_num.value == 0) {
					finishShow.value = true
				} else {
					animalShow.value = false
				}
			})
		}

	}

	const selectImgSrc = (item, index) => {
		selectImg.value = item
		selectedIndex.value = index;
	}
	const selectImgSrc2 = (item, index) => {
		selectAnimal.value = item
		selectedIndex2.value = index;
	}
	const getImageStyle2 = (index) => {
		if (index === selectedIndex2.value) {
			return {
				border: '2rpx solid #51D580',

			};
		}
		return {};
	};

	const getImageStyle = (index) => {
		if (index === selectedIndex.value) {
			return {
				border: '2rpx solid #51D580',

			};
		}
		return {};
	};

	const toPlant = () => {

		if (pageentr_num.value == 0) {
			upnameApi({
				page: page.value,
				big_sort: big_sort.value,
				small_sort: small_sort.value,
				type: 'plant',
				name: selectImg.value,
			}).then(res => {
				console.log(res)
				plantShow.value = false
				threeTipShow.value = true
			})
		} else {
			upnameApi({
				page: page.value,
				big_sort: editForm.value['big_sort'],
				small_sort: editForm.value['small_sort'],
				type: 'plant',
				name: selectImg.value,
			}).then(res => {
				console.log(res)
				plantShow.value = false
				animalShow.value = true
			})
		}

	};
	const toEditAnimal = () => {
		threeTipShow.value = false
		animalShow.value = true
		getplantApi().then(res => {
			console.log(res)
			plantList.value = res.plantlist
			decorateList.value = res.decoratelist
		})

	};
	const toAnimal = () => {

		if (pageentr_num.value == 0) {
			upnameApi({
				page: page.value,
				big_sort: big_sort.value,
				small_sort: small_sort.value,
				type: 'decorate',
				name: selectAnimal.value,
			}).then(res => {
				animalShow.value = false
				finishShow.value = true
			})
		} else {
			upnameApi({
				page: page.value,
				big_sort: editForm.value['big_sort'],
				small_sort: editForm.value['small_sort'],
				type: 'decorate',
				name: selectAnimal.value,
			}).then(res => {
				animalShow.value = false
				getAreaWords()
			})
		}
	};
	const toStepTwo = () => {
		finishShow.value = false
		uni.redirectTo({
			url: '/pagesA/reciteWords/twoStage?big_sort=' + big_sort.value + '&pageentr_num=' + pageentr_num
				.value + '&page=' + page.value + '&small_sort=' + small_sort.value + '&region_num=' +
				region_num
				.value
		})
	};
	const toFour = (item, type) => {
		console.log(item, 995)
		if (type == 1) {
			uni.setStorageSync('type', 1)

		} else if (type == 2) {
			uni.setStorageSync('type', 2)
		}
		uni.setStorageSync('region_num', region_num.value)
		finishShow.value = false
		uni.navigateTo({
			url: '/pagesA/reciteWords/stage?big_sort=' + item.big_sort + '&pageentr_num=' + pageentr_num
				.value + '&page=' + page.value + '&small_sort=' + item.small_sort + '&region_num=' + region_num
				.value
		});

	};
	const cancelEditName = () => {
		editShow.value = false;
		secondTipShow.value = false
	};
	const editName = (item) => {
		editShow.value = true;
		editForm.value = item

	};
	const showPopup = (i) => {
		console.log(i.learn_status)
		if (i.learn_status == 0) {
			noOpenShow.value = true
		}
	};
	const info=ref({})
	const onLongPress = (i) => {
		console.log(i,'长按事件')
		if(i.learn_status==1){
			
		}else{
			info.value=i
			longShow.value=true
		}
		
	};

	const longShow=ref(false)
	const closePlant = () => {
		plantShow.value = false
		animalShow.value = true
	};
	const closeAnimal = () => {
		animalShow.value = false
		getAreaWords()
	};
	const secClick = (item) => {
		item.select=!item.select
	};
	const movenewwordApi=inject('movenewword')
	const wordId=ref('')
	const yiru = () => {
			let arr = []
			info.value.wordsList.forEach((item, index) => {
				if(item.select){
					arr.push(item.wordId)
				}
			})
			wordId.value = arr.join(',')
			console.log(wordId.value)
			movenewword()
		}
	 const movenewword = () => {
	 	if(wordId.value==''){
	 		uni.showToast({
	 			title:"请选择要移除数据",
	 			icon:'none'
	 		})
	 		return
	 	}
	 	movenewwordApi({
	 		wordId: wordId.value,
	 	}).then(res => {
	 		
			wordId.value=false
			longShow.value=false
			getAreaWords()
	 	})
	 }
</script>

<style lang="scss">
	.region {
		display: flex;


	}

	.wordBox {
		height: 100%;
		width: 100%;
		// height: calc((100vh - 44px - var(--status-bar-height))/4)
	}

	.activeBorder {
		border: 1rpx dashed #52e449;
	}

	.defaultBorder {
		border: 1rpx dashed #ccc;
	}

	.activeBj {
		background-color: #37a730;
	}

	.defaultBj {
		background-color: #ff5500;
	}

	.tag {
		border-radius: 15rpx;
		padding: 5rpx 10rpx;
		font-size: 22rpx;
		color: #fff;
	}

	.absText {
		font-size: 150rpx;
		color: #c3c3c3;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// width: 100px;
		// height: 100px;
	}

	.popupBox {
		width: 80vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}

	.sheetBox {
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.green {
		color: #37a730;
	}


	.box {
		width: 710rpx;
		border: 12rpx solid #51D580;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 10rpx auto 0;

		.box_lists {
			width: calc(50% - 6rpx);
			height: calc(50% - 6rpx);
			border-right: 6rpx solid #51D580;
			border-bottom: 6rpx solid #51D580;
			position: relative;

			.absolute {
				position: absolute;
				background-color: rgba(0, 0, 0, .5);
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 99;
			}

			.box_list_head {
				padding: 16rpx;

				.box_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.box_pro {
					font-weight: bold;
					font-size: 24rpx;
					color: #666666;

				}
			}

			.box_list {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}

			.hover {
				color: #51D580;
			}

			.box_list_cont {
				width: 50%;
				position: relative;
			}

			.border_right {
				border-right: 1rpx dashed #CCCCCC;
			}
		}

		.positon_img {
			position: absolute;
			width: 134rpx;
			height: 60rpx;
			top: 50%;
			left: 50%;
			margin-top: -30rpx;
			z-index: 999;
			margin-left: -67rpx;
		}
	}

	.box_other {
		// margin: 0 auto;
	}

	.bg {
		width: 188rpx;
		height: 84rpx;
		background: #FFC300;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 6rpx solid #51D580;
		text-align: center;
		line-height: 84rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -104rpx;
		margin-top: -52rpx;
		z-index: 999;
	}

	.noda_img {
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 90rpx auto 22rpx;
	}

	.noda_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		text-align: center;
		color: #fff;
	}

	.pos_img {
		background-size: 100% 50%;
		background-repeat: no-repeat;
		background-position: bottom;
		height: 100%;
	}

	.popup_bg {
		width: 592rpx;
		height: 436rpx;
		position: fixed;
		top: 30rpx;
		left: 96rpx;

		.btn-section {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn {
				width: 126rpx;
				height: 46rpx;
				background: #51D580;
				border-radius: 74rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				line-height: 46rpx;

			}
		}
	}

	.popup_bg.bg2 {
		top: 220rpx;
		left: 50rpx;
	}

	.edit_bg {
		width: 594rpx;
		height: 554rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;

		.btn-section {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn {
				width: 252rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #51D580;
				border-radius: 74rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;

			}
		}
	}

	::v-deep .u-input {
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.popup-main {
		padding: 40rpx 52rpx;
		box-sizing: border-box;
	}

	.laoda_img {
		width: 26rpx;
		height: 26rpx;
	}

	.noOpen_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		padding: 0 50rpx;
		box-sizing: border-box;

		.btn {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
		}

	}
	.long_popup{
		width: 510rpx;
		height: 860rpx;
		padding: 30rpx 32rpx 0 32rpx;
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		position: relative;
		.pro{
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.name{
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}
		.sec_img{
			width: 38rpx;
			height: 38rpx;
			margin-right: 18rpx;
		}
		.title{
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}
		.pos_absolute{
			position: absolute;
			bottom: 20rpx;
			left: 24rpx;
		}
		.warn_btn{
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.warn_img{
			width: 28rpx;
			height: 28rpx;
		}
		.warn_cont{
			margin-left: 12rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
		.long_list{
			width: 38%;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			margin-top: 58rpx;
			
		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>